<template>
  <div class="max-w-2xl p-4 mx-auto">
    <h2 class="mb-4 text-xl font-bold">随机头像生成</h2>
    
    <!-- 控制面板 -->
    <div class="flex flex-wrap gap-4 mb-6">
      <div class="w-full md:w-auto">
        <label class="block mb-1 font-medium text-gray-700">风格</label>
        <select v-model="style" class="w-full p-2 border rounded">
          <option value="identicon">几何图案</option>
          <option value="bottts">机器人</option>
          <option value="avataaars">卡通人物</option>
          <option value="jdenticon">抽象几何</option>
          <option value="gridy">像素格子</option>
          <option value="micah">简约人物</option>
        </select>
      </div>
      
      <div class="w-full md:w-auto">
        <label class="block mb-1 font-medium text-gray-700">尺寸</label>
        <select v-model="size" class="w-full p-2 border rounded">
          <option :value="80">小 (80px)</option>
          <option :value="128">中 (128px)</option>
          <option :value="200">大 (200px)</option>
          <option :value="300">特大 (300px)</option>
        </select>
      </div>
      
      <div class="w-full md:w-auto">
        <label class="block mb-1 font-medium text-gray-700">背景颜色</label>
        <input type="color" v-model="bgColor" class="w-full h-10 border rounded">
      </div>
    </div>
    
    <!-- 头像预览区域 -->
    <div class="flex flex-wrap gap-4 mb-6">
      <div 
        v-for="(avatar, index) in avatars" 
        :key="index" 
        class="flex flex-col items-center p-2 border rounded cursor-pointer"
        :class="{ 'border-blue-500 border-2': selectedIndex === index }"
        @click="selectAvatar(index)">
        <img :src="avatar" :alt="`Avatar ${index + 1}`" class="mb-2 rounded-lg" />
        <span class="text-sm">头像 {{ index + 1 }}</span>
      </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="flex flex-wrap gap-4 mb-6">
      <button 
        @click="generateAvatars" 
        class="px-4 py-2 text-white bg-blue-500 rounded">
        生成新头像
      </button>
      <button 
        @click="downloadAvatar" 
        class="px-4 py-2 text-white bg-green-500 rounded"
        :disabled="selectedIndex === -1">
        下载选中头像
      </button>
      <button 
        @click="copyAvatarUrl" 
        class="px-4 py-2 text-white bg-purple-500 rounded"
        :disabled="selectedIndex === -1">
        复制头像链接
      </button>
    </div>
    
    <!-- 参数设置 -->
    <div v-if="style === 'avataaars'" class="mb-6">
      <h3 class="mb-2 font-bold">卡通人物选项</h3>
      <div class="grid grid-cols-2 gap-2 md:grid-cols-3">
        <div>
          <label class="block mb-1 text-sm font-medium text-gray-700">头发</label>
          <select v-model="options.top" class="w-full p-2 text-sm border rounded" @change="updateAvatar">
            <option value="longHair">长发</option>
            <option value="shortHair">短发</option>
            <option value="eyepatch">眼罩</option>
            <option value="hat">帽子</option>
            <option value="hijab">头巾</option>
            <option value="turban">头巾</option>
          </select>
        </div>
        <div>
          <label class="block mb-1 text-sm font-medium text-gray-700">衣服</label>
          <select v-model="options.clothes" class="w-full p-2 text-sm border rounded" @change="updateAvatar">
            <option value="blazer">西装</option>
            <option value="sweater">毛衣</option>
            <option value="hoodie">连帽衫</option>
            <option value="overall">工装</option>
            <option value="shirtCrewNeck">圆领T恤</option>
          </select>
        </div>
        <div>
          <label class="block mb-1 text-sm font-medium text-gray-700">眼睛</label>
          <select v-model="options.eyes" class="w-full p-2 text-sm border rounded" @change="updateAvatar">
            <option value="default">默认</option>
            <option value="happy">开心</option>
            <option value="surprised">惊讶</option>
            <option value="wink">眨眼</option>
            <option value="eyeRoll">翻白眼</option>
          </select>
        </div>
        <div>
          <label class="block mb-1 text-sm font-medium text-gray-700">嘴巴</label>
          <select v-model="options.mouth" class="w-full p-2 text-sm border rounded" @change="updateAvatar">
            <option value="default">默认</option>
            <option value="smile">微笑</option>
            <option value="grimace">咬牙</option>
            <option value="serious">严肃</option>
            <option value="tongue">吐舌头</option>
          </select>
        </div>
        <div>
          <label class="block mb-1 text-sm font-medium text-gray-700">肤色</label>
          <select v-model="options.skinColor" class="w-full p-2 text-sm border rounded" @change="updateAvatar">
            <option value="light">浅色</option>
            <option value="brown">棕色</option>
            <option value="darkBrown">深棕色</option>
            <option value="black">黑色</option>
            <option value="tanned">晒黑的</option>
            <option value="yellow">黄色</option>
            <option value="pale">苍白</option>
          </select>
        </div>
        <div>
          <label class="block mb-1 text-sm font-medium text-gray-700">配件</label>
          <select v-model="options.accessory" class="w-full p-2 text-sm border rounded" @change="updateAvatar">
            <option value="none">无</option>
            <option value="roundGlasses">圆眼镜</option>
            <option value="sunglasses">太阳镜</option>
            <option value="facialHair">胡子</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'

// 状态变量
const style = ref('identicon')
const size = ref(128)
const bgColor = ref('#f0f0f0')
const avatars = ref([])
const selectedIndex = ref(-1)

// avataaars 特有选项
const options = ref({
  top: 'shortHair',
  clothes: 'blazer',
  eyes: 'default',
  mouth: 'default',
  skinColor: 'light',
  accessory: 'none'
})

// 生成随机字符串作为种子
function generateRandomSeed() {
  return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
}

// 根据当前参数生成一组头像
function generateAvatars() {
  avatars.value = []
  selectedIndex.value = -1
  
  for (let i = 0; i < 6; i++) {
    const seed = generateRandomSeed()
    
    if (style.value === 'avataaars') {
      const query = new URLSearchParams({
        avatarStyle: 'Circle',
        topType: options.value.top === 'shortHair' ? 'ShortHairDreads01' : 'LongHairMiaWallace',
        accessoriesType: options.value.accessory === 'none' ? 'Blank' : 
                       options.value.accessory === 'roundGlasses' ? 'Round' : 
                       options.value.accessory === 'sunglasses' ? 'Sunglasses' : 'Blank',
        hairColor: 'BrownDark',
        facialHairType: options.value.accessory === 'facialHair' ? 'BeardMedium' : 'Blank',
        clotheType: options.value.clothes === 'blazer' ? 'BlazerShirt' : 
                  options.value.clothes === 'sweater' ? 'Hoodie' : 
                  options.value.clothes === 'hoodie' ? 'Hoodie' : 'ShirtCrewNeck',
        eyeType: options.value.eyes === 'happy' ? 'Happy' : 
               options.value.eyes === 'surprised' ? 'Surprised' : 
               options.value.eyes === 'wink' ? 'Wink' : 'Default',
        mouthType: options.value.mouth === 'smile' ? 'Smile' :
                 options.value.mouth === 'grimace' ? 'Grimace' :
                 options.value.mouth === 'serious' ? 'Serious' : 'Default',
        skinColor: options.value.skinColor === 'light' ? 'Light' :
                 options.value.skinColor === 'brown' ? 'Brown' :
                 options.value.skinColor === 'darkBrown' ? 'DarkBrown' :
                 options.value.skinColor === 'black' ? 'Black' : 'Yellow',
      }).toString()
      
      avatars.value.push(`https://avatars.dicebear.com/api/avataaars/${seed}.svg?${query}`)
    } else {
      const bgColorParam = bgColor.value !== '#f0f0f0' ? `&background=${bgColor.value.replace('#', '')}` : ''
      avatars.value.push(`https://avatars.dicebear.com/api/${style.value}/${seed}.svg?size=${size.value}${bgColorParam}`)
    }
  }
}

// 选择一个头像
function selectAvatar(index) {
  selectedIndex.value = index
}

// 下载选中头像
function downloadAvatar() {
  if (selectedIndex.value === -1) return
  
  const link = document.createElement('a')
  link.href = avatars.value[selectedIndex.value]
  link.download = `avatar-${new Date().getTime()}.svg`
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

// 复制头像链接
function copyAvatarUrl() {
  if (selectedIndex.value === -1) return
  
  navigator.clipboard.writeText(avatars.value[selectedIndex.value])
    .then(() => {
      alert('头像链接已复制到剪贴板')
    })
    .catch(err => {
      console.error('复制失败:', err)
      alert('复制失败，请手动复制')
    })
}

// 更新特定头像
function updateAvatar() {
  if (style.value !== 'avataaars' || avatars.value.length === 0) return
  
  generateAvatars()
}

// 监听参数变化，重新生成头像
watch([style, size, bgColor], () => {
  if (avatars.value.length > 0) {
    generateAvatars()
  }
})

// 组件加载时生成一组头像
onMounted(() => {
  generateAvatars()
})
</script> 